<div class="rubikcube" id="rubikcube-{$widget_data.uniqueid}">
  <div class="content layout-{$widget_data.layout}">
    <div class="webkit-box {$widget_data.radius}">
      <!--{if $widget_data.images}-->

      <!--{if $widget_data.layout eq 2}-->
      <div class="item">
        <img class="block" src="{$widget_data.images.0.url|url_format}">
        <img class="block" src="{$widget_data.images.1.url|url_format}">
      </div>
      <div class="item"><img class="block" src="{$widget_data.images.2.url|url_format}"></div>
      <!--{else}-->
      <div class="item"><img class="block" src="{$widget_data.images.0.url|url_format}"></div>
      <div class="item">
        <img class="block" src="{$widget_data.images.1.url|url_format}">
        <img class="block" src="{$widget_data.images.2.url|url_format}">
      </div>
      <!--{/if}-->

      <!--{else}-->
      <div class="empty center">
        <p>魔方</p>
      </div>
      <!--{/if}-->
    </div>
  </div>
</div>

<style>
  
  .rubikcube .content .item,.rubikcube .content img {
    width: 100%;
  }

  .rubikcube .layout-1 .item:first-child {
    border-right: 1px #f5f5f5 solid;
  }
  .rubikcube .layout-1 .item:last-child img:first-child {
    border-bottom: 1px #f5f5f5 solid;
  }
  .rubikcube .layout-1 .round .item:first-child img {
    border-radius: 10px 0 0 10px;
  }

  .rubikcube .layout-1 .round .item:last-child img:first-child {
    border-radius: 0px 10px 0 0;
  }

  .rubikcube .layout-1 .round .item:last-child img:last-child {
    border-radius: 0 0 10px 0px;
  }

  .rubikcube .layout-2 .item:last-child {
    border-left: 1px #f5f5f5 solid;
  }
  .rubikcube .layout-2 .item:first-child img:first-child {
    border-bottom: 1px #f5f5f5 solid;
  }

  .rubikcube .layout-2 .round .item:first-child img:first-child {
    border-radius: 10px 0 0 0;
  }

  .rubikcube .layout-2 .round .item:first-child img:last-child {
    border-radius: 0 0 0 10px;
  }

  .rubikcube .layout-2 .round .item:last-child img {
    border-radius: 0px 10px 10px 0;
  }

  .rubikcube .empty {
    height: 100px;
    line-height: 100px;
    width: 100%;
    background-color: #ebf8fd;
    color: #b6e3f5;
  }
</style>
<script>
  $(function () {
    /* {if $widget_data.bgcolor} */
    $('#rubikcube-{$widget_data.uniqueid}').css('background-color', '{$widget_data.bgcolor}');
    /* {/if} */

    /* {if $widget_data.radius eq 'round'} */
    $('#rubikcube-{$widget_data.uniqueid} .content').css('padding-left', '10px').css('padding-right', '10px');
    /* {/if} */

    /* {if $widget_data.height gt 0} */
    // $('#rubikcube-{$widget_data.uniqueid} .content .item img').css('height', '{$widget_data.height}px');
    /* {/if} */

    $('#rubikcube-{$widget_data.uniqueid}').css('padding', '{$widget_data.space|default:5}px 0');
  });
</script>